<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>discover</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/fav.css">
    <link rel="stylesheet" href="./css/mine.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./js/dis.js"></script>
    <script src="./js/common.js"></script>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
</head>
<script>

</script>

<body>
    <div class="main pd12">
        <div class="top flex_x between pd12">
            <div class="t_left">
                <img src="./static/image/Snipaste_2023-11-28_15-57-24.png" alt="">
            </div>
            <a href="./search.html">
                <div class="t_right algin_center">
                    <img class="mr_20" src="./static/image/Component 22.svg" alt="">
                    <i class="iconfont font_26">&#xe8c4;</i>
                </div>
            </a>
        </div>
        <div class="f_top flex_x start">
            <img class="mr_20" src="./static/image/Rectangle 65.png" alt="">
            <div class="f_right flex_y start">
                <span class="font_24">My Favorite</span>
                <div><span class="mr_20">Harper</span> <i class="iconfont">&#xe7eb;</i></div>
            </div>
        </div>
        <div class="f_content pd12 detailss">
            <div class="f_item flex_x between pd12 border_box pre">
                <div class="f_left flex_x start">
                    <span class="mr_20 color_red font_24 font_blod">1</span>
                    <div class="flex_y start">
                        <span class="font_16">Thinking Out Loud</span>
                        <span class="font_9">Ed Sheeran </span>
                    </div>
                </div>
                <div class="f_right">
                    <i class="iconfont">&#xe8c4;</i>
                </div>
            </div>
            <div class="f_item flex_x between pd12 border_box mt_16">
                <div class="f_left flex_x start">
                    <span class="mr_20 color_red font_24 font_blod">2</span>
                    <div class="flex_y start">
                        <span class="font_16">Hello</span>
                        <span class="font_9">Adele</span>
                    </div>
                </div>
                <div class="f_right">
                    <i class="iconfont">&#xe8c4;</i>
                </div>
            </div>
            <div class="f_item flex_x between pd12 border_box mt_16">
                <div class="f_left flex_x start">
                    <span class="mr_20 color_red font_24 font_blod">3</span>
                    <div class="flex_y start">
                        <span class="font_16">YoungBlood</span>
                        <span class="font_9">5 Seconds of Summer</span>
                    </div>
                </div>
                <div class="f_right">
                    <i class="iconfont">&#xe8c4;</i>
                </div>
            </div>
        </div>


        <!-- 我的侧边栏内容框 -->
        <div class="mine pos_a txt_center">
            <img class="bgs" src="./static/image/5.png" alt="">
            <img src="./static/image/2.png" class="margin0 mt_20" alt="">
            <div>Harper</div>
            <div class="sl_content flex_y between">
                <div class="sl_item">News</div>
                <div class="sl_item">Set up</div>
                <div class="sl_item">Feedback</div>
                <div class="sl_item">About us</div>
            </div>
            <div class="sign_out txt_center">Sign Out</div>
        </div>
        <div class="bott pos_f">
            <img class="pos_a" src="./static/image/imgbin_bubble-transparency-and-translucency-png 8.png" alt="">
            <div class="taggle pos_a">
                <div class="t_top flex_x around">
                    <i class="iconfont mt_10">&#xe78a;</i>
                    <i class="iconfont font_24 pause btns" >&#xe624;</i>
                    <i class="iconfont mt_10">&#xe7a5;</i>
                </div>
                <div class="t_bot font_12 mt_16">Thinking Out Loud</div>
            </div>
        </div>
    </div>
    <!-- 底部tab -->
    <div class="tab flex_x around algin_center ">
        <a href="./discover.html">
            <div class="tab_item flex_y txt_center algin_center ">
                <img src="./static/image/headset.svg" alt="">
                <span class="mt_16">discover</span>
            </div>
        </a>
<a href="./mine.html">
    
    <div class="tab_item flex_y txt_center algin_center ">
        <img src="./static/image/Vector 2.svg" alt="">
        <span class="mt_16">My</span>
    </div>
</a>
        <div class="disnone">
            <img src="./static/image/Vector 19.svg" alt="">
        </div>
        <div class="tab_item flex_y txt_center algin_center active">
            <img src="./static/image/Vector 2.svg" alt="">
            <span class="mt_16">Favorite</span>
        </div>

    </div>
</body>

</html>